<template>
  <div class="topmenu-box">
    <el-menu
      :default-active="activeIndex"
      router
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="#">
        <img src="../../assets/images/movie.jpg" alt="" width="50" height="50" />
        欢迎来到movie
      </el-menu-item>
      <el-menu-item index="/miswuIndex">
        电影中心     
      </el-menu-item>
      <el-submenu index="2" class="usercenter">
        <template slot="title">
          <span style="font-size:18px">个人中心</span>
        </template>
        <el-menu-item index="/myCollectionCenter">我的收藏</el-menu-item>
        <el-menu-item index="/myInfoCenter">个人信息</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">设置管理</template>
          <el-menu-item index="#">个人配置</el-menu-item>
          <el-menu-item index="#">其他选项</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="#" @click="lookMsg()">
        消息中心
        <el-badge v-if="msgBoolean" :value="msgCount" :max="maxMsgCount" style="margin-top:-10px"></el-badge>  
      </el-menu-item>
      <el-menu-item index="/myOrdersCenter">
        我的订单
      </el-menu-item>
      <el-menu-item v-if="logoutSee" index="#" @click="userLogin()">登录/注册</el-menu-item>
      <el-menu-item v-if="loginSee" index="#" @click="logout()">
        欢迎您!!!
        <el-link type="warning" :underline="false"><i class="el-icon-view el-icon--right"></i>退出登陆</el-link>
      </el-menu-item>
    </el-menu>
    <!-- 消息框 -->
    <el-drawer
      title="消息中心(单击处理)"
      :visible.sync="msgDrawer"
      :direction="msgDirection">
      <!-- @close="handlerMsg()" -->
      <el-alert
        v-for="(item,index) in msgList"
        :key="index"
        :title="item.title" 
        :type="item.type" 
        effect="dark"
        show-icon
        :closable="closBool"              
        @click.native="handlerMsg()"
        style="margin-bottom:10px;overflow-y:srcoll"
        >
      </el-alert>
    </el-drawer>
  </div>
</template>

<script>
import { isLogin,notLoginTip } from '@/utils/auth.js';
export default {
  created(){
    let token=JSON.parse(sessionStorage.getItem('token'));
    if(token !== null){
      this.logoutSee = false;
      this.loginSee = true;
    }
  },
  data() {
    return {
      logoutSee:true,
      loginSee:false,
      activeIndex: '/miswuIndex',
      prefix:'/videos',
      // 是否有消息标识
      msgBoolean:true,
      // 消息框
      msgDrawer: false,
      // 打开方向
      msgDirection: 'rtl',
      // 消息是否可处理 根据消息类型
      closBool:false,
      msgList:[
        {"userId":1212121,"msgId":1212121,"title":"这是一条成功的消息!","type":"success"},
        {"userId":22222,"msgId":222222,"title":"这是一条提示消息!","type":"info"},
        {"userId":222221,"msgId":2222224,"title":"这是一条警告消息!","type":"warning"},
      ],
      // 允许的最大消息数
      maxMsgCount:99,
      // 实际消息数
      msgCount:200
    };
  },
  mounted() {},
  methods: {
    // 用户登录
    userLogin(){
      this.$router.push("/UserLogin");
      //location.href="../../../static/UserLogin.html";
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 消息处理回调
    handlerMsg() {
      this.$confirm('确定删除该消息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$message.success("执行成功");
      }).catch(() => {
        this.$message.info("取消执行");         
      });
    },
    // 退出登录
    async logout(){
      const bool =await this.$confirm('确定退出登录?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err);
      // console.log('bool=='+bool);
      if(bool === 'confirm'){
        let result =await this.$http.delete("/users/cloud-users/Movie-Users-Services/userloginout");
        console.log(result);
        if(result.status === 204 || result.statusText === 'No Content'){
          sessionStorage.clear();
          this.logoutSee=true;
          this.loginSee=false;
          //store 更改登录状态
          this.$store.commit('updateLogoutState');
          this.$router.push('/UserLogin');
          this.$message.success("登出成功!!!");
        }else{
          this.$message.error("系统异常,请联系管理员!!!");
        }        
      }else{
        // bool = cancel
        this.$message.warning("取消登出!!!");
      }
    },
    // 查看消息
    lookMsg(){
      if(isLogin()){
        this.msgDrawer = true;
      }else{
        this.$message.error(notLoginTip(1));
      }
      
    }
  }
};
</script>

<style scoped>
.el-menu-demo{
  height: 65px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-menu-demo .el-menu-item,.usercenter{
  font-size: 18px;
  margin-left: 4%;
  font-family: "kaiti";
  /* height: 75px; */
  /* line-height: 70px; */
}
</style>
